<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{admin/adminCommons :: top_head(~{::title})}">
    <title>后台博客管理</title>
</head>
<body>
<div>
    <div class="ui container grid middle center aligned" style="padding-top: 175px">
        <div class="eight wide column">
            <h2 class="ui teal image header">
                <div class="content massive">
                    登录账号
                </div>
            </h2>
            <form id="login_form" class="ui large form" th:action="@{/admin/login}" method="post">
                <div class="ui stacked segment">
                    <div class="field">
                        <div class="ui left icon input">
                            <i class="iconfont icon-B  icon"></i>
                            <input type="text" name="username" placeholder="用户名">
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui left icon input">
                            <i class="icon iconfont icon-B "></i>
                            <input type="password" name="password" placeholder="密码">
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" name="rememberMe" class="hidden">
                            <label>记住我</label>
                        </div>
                    </div>
                    <button class="ui fluid large teal submit button" type="submit">登陆</button>
                </div>
                <div class="ui error message"></div>
            </form>
            <div class="ui red message" th:unless="${#strings.isEmpty(msg)}" th:text="${msg}">用户名和密码错误</div>
            <div class="ui message">
                新用户? <a href="#">注册</a>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery-3.6.0.min.js}" type="text/javascript"></script>
<script th:src="@{/js/semantic.min.js}" type="text/javascript"></script>
<script type="text/javascript">
    $('.ui.checkbox').checkbox();
    $('#login_form').form({
        fields: {
            username: {
                identifier: 'username',
                rules: [
                    {
                        type: 'empty',
                        prompt: '请输入用户名！'
                    }
                ]
            },
            password: {
                identifier: 'password',
                rules: [
                    {
                        type: 'empty',
                        prompt: '请输入密码！'
                    },
                    {
                        type: 'minLength[6]',
                        prompt: '你的密码长度必须大于 {ruleValue} 个字符！'
                    }
                ]
            },
        }
    })
</script>
</body>
</html>